<template>
<div class="header">
   <Header>
       <Row>
        <Col span="6"> 
          <h2 class="logoName">云音乐</h2>
        </Col>
        <Col span="12">
          <Input size="small" v-model="keywords" icon="search" @on-enter="search" placeholder="搜索音乐, 歌手, 歌词, 用户" style="width: 200px"></Input>
        </Col>     
        <Col span="6">
          <div class="demo-avatar" @click="loginModel=true">          
            <Avatar v-if="userData"  :src="avatarUrl"/>
            <Avatar v-else icon="person" />
        </div>      
        </Col>
    </Row>
    </Header>
    <!--  -->
     <Modal
        title="用户登入"
        v-model="loginModel"      
        :loading="loading"
       >
        <Form ref="loginFrom" :model="loginFrom" :label-width="80">
            <FormItem label="手机" prop="phone">
                <Input type="text" v-model="loginFrom.phone"></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input type="password" v-model="loginFrom.password"></Input>
            </FormItem>           
        </Form>
         <div slot="footer">             
              <Button type="primary" @click="login('loginFrom')">登入</Button>           
         </div>
    </Modal>
</div>  
</template>
<script>
import {mapGetters, mapMutations} from 'vuex'
export default {
  name: 'header-top',
  data () {
    return {
      loginModel: false,
      loading: true,
      loginFrom: {
         password: '',                
         phone: ''
      },
      keywords: '',
      avatarUrl: ''
    }
  },
  mounted () {
   
  },
  computed: {
    // 使用对象展开运算符...将 getters 混入 computed 对象中
    ...mapGetters([
      'userData', 
      'keyword'     
    ])
  },
  methods: {
    ...mapMutations([
        'LOGIN', 
        'KEYWORDS'       
    ]),
    search() {
      debugger
      this.$router.push({name: 'list'})   
      this.KEYWORDS(this.keywords) 
    },
    login (fromName) { 
        this.$requset.get(this.$Api.login, this.loginFrom).then((data) => { 
        let {code, msg, result} = data 
        if (code == 200) {
          this.avatarUrl =  data.profile.avatarUrl           
          this.LOGIN(data) 
          this.loginModel = false
          this.$Message.success('登入成功')         
        } else {
          this.$Message.error(msg) 
        }
      }) 
    }
  }
}
</script>
<style>
.demo-avatar {
  float: right;
  text-align: center;
  padding-left: 20px;
  border-left: 1px solid #802613;
  cursor: pointer;
}
.header{
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 12312;
  height: 60px;
  overflow: hidden;
}
  .ivu-layout-header {
      background: #ab3319;
     
  }
  .logoName {
    color: aliceblue
  }
 /* .ivu-menu-dark{
     background: #ab3319
  } */
</style>
